<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>教务员-学生实习信息管理</title>
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/index.css">
</head>
<body>
<div class="body-head"><span>学生实习信息管理&nbsp;>&nbsp;实习日志</span></div>
<div class="demoTable">
    <label class="layui-form-label">毕业年份：</label>
    <div class="layui-inline">
        <input class="layui-input" type="text" id="yearSelector">
    </div>
    <button class="layui-btn layui-btn-sm" data-type="reload" id="year-btn">搜索</button>
    <button class="layui-btn layui-btn-sm" id="export-btn">全部导出</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="export">导出</a>
</script>

<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>

    layui.use(['table', 'jquery', 'form', 'laydate'], function () {
        let table = layui.table;
        let $ = layui.$;
        let form = layui.form;
        let laydate = layui.laydate;

        laydate.render({
            elem: '#yearSelector', //指定元素
            type: 'year'
        });

        //用于保存表格中数据
        let stuNoArray = new Array();

        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            id: 'test',
            elem: '#test',
            url: '${ctx}/academic/getInternshipLoggerList.action',
            toolbar: '#toolbarDemo',
            title: '学生实习日志信息表',
            page: true,
            limit: 10,
            limits: [3, 5, 10],
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'studentNumber',
                    title: '学号',
                    width: 140,
                    align: 'center',
                    sort: true
                }, {
                    field: 'stuName',
                    title: '姓名',
                    align: 'center',
                    width: 140
                }, {
                    field: 'department',
                    title: '所属系',
                    align: 'center',
                    width: 140
                }, {
                    field: 'major',
                    title: '专业',
                    align: 'center',
                    width: 170
                }, {
                    field: 'loggerCount',
                    title: '日志篇数',
                    align: 'center',
                    width: 140,
                }, {
                    field: 'loggerStatus',
                    title: '完成状态',
                    align: 'center',
                    width: 140,
                }, {
                    field: 'checkCount',
                    title: '已批改篇数',
                    align: 'center',
                    width: 140
                }, {
                    field: 'checkStatus',
                    title: '批改状态',
                    align: 'center',
                    width: 140
                }, {
                    fixed: 'right',
                    align: 'center',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 120
                }]
            ],
            done: function(res, curr, count) {
                stuNoArray = new Array();
                res.data.forEach(function (data) {
                    console.log(data.studentNumber);
                    stuNoArray.push(data.studentNumber);
                });
                $("[data-field='loggerStatus']").children().each(function () {
                    if ($(this).text()=='true') {
                        $(this).text("已完成");
                        $(this).css('color','blue');
                    }else if($(this).text()=='false') {
                        $(this).text("未完成");
                        $(this).css('color','red')
                    }
                });
                $("[data-field='checkStatus']").children().each(function () {
                    if ($(this).text()=='true') {
                        $(this).text("已完成");
                        $(this).css('color','blue');
                    }else if($(this).text()=='false') {
                        $(this).text("未完成");
                        $(this).css('color','red')
                    }
                });
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                let result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                }
            }
        });

        let year = $("#yearSelector");
        let active = {
            reload: function () {
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1  //重新从第1页开始
                    },
                    where: {
                        year: year.val()
                    }
                });
            }
        };

        $('#export-btn').on('click', function () {
            let year2 = $("#yearSelector").val();
            if (year2 == "") {
                year2 = "所有";
            }else {
                year2 += "年";
            }
            console.log(stuNoArray);
            if (stuNoArray.length == 0) {
                layer.msg("导出失败，不存在数据");
            }else {
                layer.confirm("确定要导出" + year2 + "学生的实习日志吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
                    location.href = "${ctx}/academic/exportInternshipLogger.action?stuNoArray="+stuNoArray;
                    layer.closeAll('dialog');
                });
            }
        });

        $('#year-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //单个导出
        table.on('tool(test)', function (obj) {

            switch (obj.event) {
                case 'export':
                    let data = obj.data;
                    console.log(data.loggerStatus && data.checkStatus);
                    if (!(data.loggerStatus && data.checkStatus)) {
                        layer.confirm("1.该生的实习日志未完成;  2.该生的实习日志未批改",{btn: ['确定'], title: "提示"});
                    }else {
                        layer.confirm("确定要导出该学生的实习日志吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
                            location.href = "${ctx}/academic/exportInternshipLogger.action?stuNoArray="+data.studentNumber;
                            layer.closeAll('dialog');
                        });
                    }

                    //更新表单
                    form.render();
                    break;
            }
        });

        $("#btnClose").on("click", function (index) {
            layer.closeAll();
        });

    });
</script>
<script src="${ctx}/static/js/index.js"></script>
</body>
</html>
